﻿.rounded-corners(@radius, @addition: ~"") {
    -moz-border-radius: @radius @addition;
    -webkit-border-radius: @radius @addition;
    border-radius: @radius @addition;
}

.box-shadow(@dx, @dy, @radius, @color) {
    -moz-box-shadow: @dx @dy @radius @color;
    -webkit-box-shadow: @dx @dy @radius @color;
    box-shadow: @dx @dy @radius @color;
}

@anchorColor: #0077CC;
@buttonBorderColor: #888;
@numberColor: #111;
@textColor: #555;
@mutedColor: #aaa;
@normalFonts: Helvetica, Arial, sans-serif;
@codeFonts: Consolas, monospace, serif;

// do some resets
.profiler-result, .profiler-queries {
    color:#555;
    line-height:1;
    font-size:12px;

    pre, code, label, table, tbody, thead, tfoot, tr, th, td {
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        font:inherit;
        vertical-align:baseline;
        background-color:transparent;
        overflow:visible;
        max-height:none;
    }
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    a, a:hover {
        cursor:pointer;
        color:@anchorColor;
    }
    a {
        text-decoration:none;
        &:hover {
            text-decoration:underline;
        }
    }
}

// styles shared between popup view and full view
.profiler-result {
    font-family:@normalFonts;

    .label {
        color:@textColor;
        overflow:hidden;
        text-overflow: ellipsis;
    }

    .unit {
        //margin-left:4px;
        color:@mutedColor;
    }

    .trivial {
        display:none;
        td, td * {
            color:@mutedColor;
        }
    }

    pre, code, .number, .unit {
        font-family:@codeFonts;
    }

    .number {
        color:@numberColor;
    }

    .info {
        text-align:right;
        .name {
            float:left;
        }
        .server-time {
            white-space:nowrap;
        }
    }
	.duplicates {
		background-color: #ffa07a;
	}
    .timings {
        th {
            background-color:#fff;
            color:@mutedColor;
            text-align:right;
        }
        th, td {
            white-space:nowrap;
        }
        .duration-with-children {
            display:none;
        }
        .duration {
            text-align:right;
        }
        .indent {
            letter-spacing:4px;
        }
        .queries-show {
            .number, .unit {
                color:@anchorColor;
            }
        }
        .queries-duration {
            padding-left:6px;
        }
        .percent-in-sql {
            white-space:nowrap;
            text-align:right;
        }

        tfoot {
            td {
                padding-top:10px;
                text-align:right;


                a {
                    font-size:95%;
                    display:inline-block;
                    margin-left:12px;

                    &:first-child {
                        float:left;
                        margin-left:0px;
                    }
                }
            }
        }
    }
}

// styles shared between popup view and full view
.profiler-queries {
    font-family:@normalFonts;

    .ms {
        margin-left:4px;
        color:@mutedColor;
    }
    .stack-trace {
        margin-bottom:15px;
    }
    pre {
        background-color:#fff;
        font-family:@codeFonts;
        white-space:pre-wrap;
    }

    th {
        background-color:#fff;
        border-bottom:1px solid #555;
        font-weight:bold;
        padding:15px;
        white-space:nowrap;
    }

    td {
        padding:15px;
        text-align:left;

        &:last-child {
            padding-right:25px; // compensate for scrollbars
        }
    }

    .odd td {
        background-color:#e5e5e5;

        pre, code {
            background-color:#e5e5e5;
        }
    }

    .selected-query td { // this needs to come after .odd
        background-color:rgba(255, 255, 0, 0.2);
        border-top:1px solid #ccc;
        border-bottom:1px solid #ccc;

        code, pre {
            background-color:transparent;
        }
    }

    .since-start, .duration {
        text-align:right;
    }

    .info div {
        text-align:right;
        margin-bottom:5px;
    }

    // prettify colors
    .str{color:maroon}
    .kwd{color:#00008b}
    .com{color:gray}
    .typ{color:#2b91af}
    .lit{color:maroon}
    .pun{color:#000}
    .pln{color:#000}
    .tag{color:maroon}
    .atn{color:red}
    .atv{color:blue}
    .dec{color:purple}
}

// ajaxed-in results will be appended to this
.profiler-results {
    position:fixed;
    top:0px;

    @radius:10px;

    &.left {
        left:0px;

        .profiler-result:last-child .profiler-button {
            -webkit-border-bottom-right-radius: @radius;
            -moz-border-radius-bottomright: @radius;
            border-bottom-right-radius: @radius;
        }

        .profiler-button {
            border-right: 1px solid @buttonBorderColor;
        }
    }

    &.right {
        right:0px;

        .profiler-result:last-child .profiler-button {
            -webkit-border-bottom-left-radius: @radius;
            -moz-border-radius-bottomleft: @radius;
            border-bottom-left-radius: @radius;
        }

        .profiler-button {
            border-left: 1px solid @buttonBorderColor;
        }
    }

    .profiler-button {
        display:none;
        z-index:1000;
        border-bottom: 1px solid @buttonBorderColor;
        background-color:#fff;
        padding: 4px 7px;
        text-align:right;
        cursor:pointer;

        &.profiler-button-active {
            background-color:maroon;

            .number {
                color:#fff;
                font-weight:bold;
            }
            .unit {
                color:#fff;
                font-weight:normal;
            }
        }
    }

    .profiler-popup {
        display:none;
        z-index:1001;
        position:absolute;
        background-color:#fff;
        border: 1px solid #aaa;
        padding:5px 10px;
        text-align:left;
        line-height:18px;
        overflow:auto;

        .box-shadow(0px, 1px, 15px, #555);

        .info {
            margin-bottom:3px;
            padding-bottom:2px;
            border-bottom:1px solid #ddd;

            .name {
                font-size:110%;

                .overall-duration {
                    display:none;
                }
            }
            .server-time {
                font-size:95%;
            }
        }

        .timings {

            th, td {
                padding-left:6px;
                padding-right:6px;
            }

            th {
                font-size:95%;
                padding-bottom:3px;
            }

            .label {
                max-width:275px;
            }
        }
    }

    .profiler-queries {
        display:none;
        z-index:1003;
        position:absolute;
        overflow-y:auto;
        overflow-x:hidden;
        background-color:#fff;

        th {
            font-size:17px;
        }
    }
}

.profiler-queries-bg {
    z-index:1002;
    display:none;
    background:#000;
    opacity:0.7;
    position:absolute;
    top:0px;
    left:0px;
    min-width:100%;
}


// used when viewing a shared, full result
.profiler-result.profiler-result-full {

    width:950px;
    margin:30px auto;

    .profiler-button {
        display:none;
    }

    .profiler-popup {

        .info {
            font-size: 25px;
            border-bottom:1px solid @mutedColor;
            padding-bottom:3px;
            margin-bottom:25px;

            .overall-duration {
                padding-right:20px;
                font-size:80%;
                color:#888;
            }
        }

        .timings {
            td, th {
                padding-left:8px;
                padding-right:8px;
            }
            th {
                padding-bottom:7px;
            }
            td {
                font-size:14px;
                padding-bottom:4px;

                &:first-child {
                    padding-left:10px;
                }
            }

            .label {
                max-width:550px;
            }
        }
    }

    .profiler-queries {
        margin:25px 0;

        th {
            font-size:16px;
            color:#555;
        }

        td {
            padding:15px 10px;
            text-align:left;
        }

        .info div {
            text-align:right;
            margin-bottom:5px;
        }
    }
}